/*
 * 文章详情里的推荐商品模块
 * @Author: ljb
 * @Date: 2018-11-15 17:20:45
 * @Last Modified by: ljb
 * @Last Modified time: 2019-01-08 18:18:24
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

	@import '~src/assets/css/common.less';

	/*最新单品的样式*/
	.recommend-area {
		width: 734*@rem-per-px;
		padding: 0 32*@rem-per-px;
		margin: 16*@rem-per-px auto 8*@rem-per-px;
		box-sizing: border-box;
		.module-title {
			width: 100%;
			height: 88*@rem-per-px;
			line-height: 88*@rem-per-px;
			font-size: 28*@rem-per-px;
			color: #232931;
			text-align: center;
		}
		.product-lists {
			display: flex;
			flex-wrap: wrap;
			.product {
				margin-bottom: 16*@rem-per-px;
				&:not(:nth-of-type(2n)){
					margin-right: 14*@rem-per-px;
				}
			}
		}
	}
	/*最新单品的样式 END*/

</style>
<template>
	<section
		v-if="products.length > 0"
		class="recommend-area white-bg">
		<div class="module-title">{{ $t('home.recommend_product') }}</div>
		<div class="product-lists">
			<singleProduct
				v-for="product in products"
				:key="product.product_id"
				:product-image="product.product_image"
				:product-title="product.product_name"
				:product-price="product.currency_settle_price || product.price"
				:left-symbol="product.symbol_left"
				:right-symbol="product.symbol_right"
				class="product"
				@click.native="handleApp('productDetail', JSON.stringify({id: product.product_id}))"/>
		</div>
	</section>
</template>

<script>

import singleProduct from 'src/views/component/single-product';
import { appHandle } from 'src/views/mixins/appHandle';

/**
 * 文章详情里的推荐商品模块
 * @vue-prop {Array} products 商品列表
 */
export default {
	name: 'SingleModule',
	components: {
		singleProduct,
	},
	mixins: [appHandle],
	props: {
		products: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {

		};
	},
	methods: {

	},
};
</script>
